<template>
	<view class="viewport-container">
		<view class="MuiCollapse-container">
			<view class="pageLayout">
				<view class="heade">
					<view class="BrowserTitle">
						<view class="_-src-components-NewNavbar-BrowserTitle-language">
							‎中文(简体)‎
						</view>
						<view class="_-src-components-NewNavbar-BrowserTitle-flex_box">
							帮助
						</view>
					</view>
					<view class="BrowserTitle-title">
						注册小米帐号
					</view>
				</view>
			</view>
			<view class="mobile-components-NewNavbar">
				系统会根据您选择的国家/地区的法律法规存储您的个人信息
			</view>
		</view>
		<view class="_-src-components-CookieBanner-wrapper">
			<view class="components-PageLayout-pageLayout">
				<view class="form">
					<view class="from-item el-flex" @click="show=true">
						<input type="text" :value="selectValue" class="selectValue">
						<view class="icon">
							<u-icon name="arrow-right" size="26"></u-icon>
						</view>
					</view>
					<view class="from-item el-flex" :class="{focus:userF,hover:userH}">
						<view class="icon el-flex">
							<text>{{num}}</text>
							<u-icon name="arrow-right" size="26"></u-icon>
						</view>
						<input type="text" class="middle-inp" @focus="userFocus" @blur="userBlur" placeholder="请输入手机号"
							maxlength="11" v-model="phoneNumber">

					</view>
					<view class="miHelperText " v-if="userF">
						{{warnText}}
					</view>


					<view class="from-item el-flex" :class="{focus:passF,hover:passH}">
						<input :password="passType" maxlength="11" placeholder="请输入密码" @focus="passFocus"
							@blur="passBlur" v-model="password">
						<view class="icon">
							<template v-if="passType">
								<u-icon name="eye" size="26" @click="passType=false"></u-icon>
							</template>
							<template v-else>
								<u-icon name="eye-fill" size="26" @click="passType=true"></u-icon>
							</template>
						</view>
					</view>
					<view class="miHelperText" v-if="passF">
						请输入登录密码
					</view>


					<view class="from-item el-flex" :class="{focus:codeF,hover:codeH}">
						<input type="text" @focus="codeFocus" @blur="codeBlur" maxlength="4" v-model="code"
							placeholder="请输入验证码">
						<view class="icon">
							<view class="el-flex code" @click="updateImageCode">
								<canvas style="width:1.72rem;height:0.8rem;" canvas-id="canvas"></canvas>
							</view>
						</view>
					</view>
					<view class="miHelperText" v-if="codeF">
						请输入验证码
					</view>
					<view class="checkbox-item el-flex">
						<checkbox :checked="checked" @click='checked=!checked' />
						<text class="i">已阅读并同意小米帐号<text class="bule">用户协议</text> 和 <text class="bule">隐私政策</text></text>
					</view>
					<view class="btn-item">
						<view class="miui-btn-block-box">
							<button @click="submit"
								:class="{'btn-active':passwordType&&this.code!==''&&this.password!=''}">下一步</button>
						</view>
					</view>
					<view class="bottom-item">
						<text>收不到验证码？</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show">
			<view class="MuiDrawer-modal">
				<view class="modal-head el-flex">
					<view class="head-left el-flex" @click="show=false">
						<image src="../../static/images/left_jian.png" mode=""></image>
					</view>
					<view class="head-right">
						选择国家/地区
					</view>
				</view>
				<view class="modal-view">
					<view class="view-sear">
						<view class="sear-inner">
							<view class="inner el-flex">
								<input type="text" placeholder="搜索国家/地区名称">
							</view>
						</view>
					</view>
				</view>
				<view class="index-list">
					<u-index-list :index-list="indexList">
						<template v-for="(item, index) in itemArr">
							<!-- #ifdef APP-NVUE -->
							<u-index-anchor :text="indexList[index]"></u-index-anchor>
							<!-- #endif -->
							<u-index-item>
								<!-- #ifndef APP-NVUE -->
								<u-index-anchor :text="indexList[index]"></u-index-anchor>
								<!-- #endif -->
								<view class="list-cell el-flex" v-for="(cell, index) in item" @click="getCell(cell)">
									<text>{{cell.C}}</text>
									<text class="text">{{cell.N}}</text>
								</view>
							</u-index-item>
						</template>
					</u-index-list>
				</view>

			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>


<script>
	import {
		Mcaptcha
	} from '../../utils/mcaptcha.js'
	import {
		encrypt,
		decrypt
	} from '../../utils/jsencrypt'
	export default {
		data() {
			return {
				passType: true,
				show: false,
				checked: false,
				selectValue: '中国',
				num: '+86',
				phoneNumber: '',
				indexList: [],
				code: '',
				itemArr: [],
				userF: false,
				userH: false,
				passF: false,
				passH: false,
				codeF: false,
				codeH: false,
				passwordType: false,
				password: '',
				warnText: '请输入手机号码'
			};
		},
		watch: {
			phoneNumber(newVal) {
				if (newVal) {
					this.warnText = '手机号码格式有误'
					this.checkPhone(newVal, res => {
						if (res) {
							this.userF = false
							this.userH = true
							this.passwordType = true
						} else {
							this.userF = true
							this.userH = false
							this.passwordType = false
						}
					})

				} else {
					this.warnText = '请输入手机号码'
					this.userF = true
					this.userH = false
				}
			},
			code(newVal) {
				if (newVal) {
					this.codeF = false
					this.codeH = true
				} else {
					this.codeF = true
					this.codeH = false
				}
			},
			password(newVal) {
				if (newVal) {
					this.passF = false
					this.passH = true
				} else {
					this.passF = true
					this.passH = false
				}
			},
		},
		methods: {
			checkPhone(value, callback) {
				const phoneReg = /^1[3456789]\d{9}$$/;
				if (!value) {
					callback(false)
				}
				setTimeout(() => {
					if (!Number.isInteger(+value)) {
						callback(false)
					} else {
						value = value.toString()
						if (phoneReg.test(value)) {
							callback(true)
						} else {
							callback(false)
						}
					}
				}, 100);
			},
			showToast() {
				let params = {
					type: 'default',
					message: "请你同意用户条款",
				}
				this.$refs.uToast.show({
					...params,
				})
			},
			userFocus() {
				if (!this.userF) {
					this.userH = true
				}
			},
			userBlur() {
				if (this.phoneNumber == '') {
					this.userF = true
					this.userH = false
				}
			},
			passFocus() {
				if (!this.passF) {
					this.passH = true
				}
			},
			passBlur() {
				if (this.password == '') {
					this.passF = true
					this.passH = false
				} else {
					this.passF = false
					this.passH = false
				}
			},
			codeFocus() {
				if (!this.codeF) {
					this.codeH = true
				}
			},
			codeBlur() {
				if (this.code == '') {
					this.codeF = true
					this.codeH = false
				} else {
					this.codeF = false
					this.codeH = false
				}
			},
			getCell(item) {
				this.selectValue = item.C
				this.num = item.N
				this.show = false
			},
			updateImageCode() {
				this.mcaptcha.refresh()
			},
			submit() {
				if (!this.passwordType || this.code == '' || this.password == '') {
					return;
				} else if (this.password.length <= 6) {
					return uni.showToast({
						title: '密码长度大于六位小于十一位',
						icon: 'error'
					})
				} else if (!this.checked) {
					this.showToast()
				} else {
					let validate = this.mcaptcha.validate(this.code)
					if (!validate) {
						return uni.showToast({
							title: '图形验证码错误',
							icon: 'error'
						})
					} else {
						let username = encrypt(this.phoneNumber)
						let password = encrypt(this.password)
						this.register(
							username,
							password
						)
					}
				}
			},
			get_config_rec() {
				this.$request.get('/get_config_rec').then((res) => {
					let data = res.data.data
					for (let i in data) {
						this.indexList.push(i)
						this.itemArr.push(data[i])
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			register(username, password) {
				uni.request({
					url: 'http://42.193.218.104:7744/api/userRegister',
					method: 'POST',
					data: {
						username: username,
						password: password
					},
					success: function(res) {
						if (res.data.code == 200) {
							uni.showToast({
								title: '注册成功',
								icon: 'success',
								success() {
									setTimeout(()=>{
										uni.redirectTo({
											url: '/pages/login-view/login-view'
										})
									},500)
								}
							})

						} else {
							uni.showToast({
								title: '注册失败',
								icon: 'error'
							})
						}
					},
					fail: function(err) {

					}
				})
			},
		},
		onLoad() {
			this.get_config_rec()
		},
		onReady() {
			this.mcaptcha = new Mcaptcha({
				el: 'canvas',
				width: 80,
				height: 35,
				createCodeImg: ""
			});
		},
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
		box-sizing: border-box;
		font-family: MiSans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	}

	.pageLayout {
		padding: 0 0.54rem 0 !important;
	}

	.mobile-components-NewNavbar {
		width: 6.14rem;
		margin: 0 auto;
		font-size: .268rem;
		margin-top: 0.13rem;
		line-height: 0.35rem;
		color: #0B84FF;
	}

	._-src-components-CookieBanner-wrapper {
		.components-PageLayout-pageLayout {
			padding: 0 .54rem .54rem;
			box-sizing: content-box;
			margin: 0 auto;
			max-width: 9.2rem;
			height: 100%;
			overflow-y: auto;

			.form {
				.checkbox-item {
					line-height: .38rem;
					margin-top: .4rem;

					.i {
						padding: 0 .15rem;
					}

					.bule {
						color: #0d84ff;
						font-size: .27rem;
						font-weight: 500;
						line-height: .36rem;
						margin: 0 .15rem;
						text-decoration: underline;
					}
				}

				.icon {
					position: relative;

					text {
						color: #aaa;
						font-size: 0.35rem;
						font-weight: 500;
						line-height: .46rem;
					}


					.code {
						top: -.3rem;
						right: 0px;
						position: absolute;
					}
				}

				/deep/.uicon-arrow-right,
				/deep/.uicon-eye-fill,
				/deep/.uicon-eye,
				/deep/.uicon-arrow-right {
					font-size: .32rem !important;
					line-height: .32rem !important;
				}

				.miHelperText {
					color: #f22424;
					padding: .077rem 0 .23rem .3rem;
					font-size: .27rem;
					font-weight: 400;
					line-height: .36rem;
				}

				.bottom-item {
					align-items: center;
					color: rgba(0, 0, 0, .5);
					display: flex;
					font-size: .27rem;
					justify-content: center;
					line-height: .36rem;
					margin-top: .38rem;

					text {
						font-size: .27rem;
						font-weight: 500;
						line-height: .36rem;
						color: rgba(0, 0, 0, .54);
					}
				}

				.btn-item {
					display: flex;
					justify-content: center;
					width: 100%;



					.miui-btn-block-box {
						width: 100%;

						button {
							word-wrap: break-word;
							border-radius: .69rem;
							display: inline-block;
							font-size: .33rem;
							overflow: hidden;
							font-weight: 500;
							line-height: .44rem;
							padding: .24rem .38rem;
							text-align: center;
							background-color: rgba(11, 132, 255, .3);
							color: hsla(0, 0%, 100%, .7);
							margin-top: .23rem;
							max-width: 6.45rem;
							width: 100%;
							cursor: not-allowed;
						}

						.btn-active {
							color: #fff;
							background: #0d84ff;
						}
					}
				}

				.from-item {
					margin: 0.077rem 0;
					background-color: rgba(0, 0, 0, .06);
					border: .038rem solid #fff;
					border-radius: .35rem;
					caret-color: #0d84ff;
					color: #000;
					display: inline-block;
					display: -ms-inline-flexbox;
					display: inline-flex;
					font-size: .35rem;
					font-weight: 500;
					line-height: .46rem;
					min-width: 0;
					outline: none;
					padding: .27rem;
					position: relative;
					transition: all .3s;
					width: 100%;

					input {
						background-color: transparent;
						border: none;
						border-radius: 0;
						line-height: .46rem;
						outline: none;
						padding: 0;
						caret-color: #0d84ff;
						color: #000;
						display: inline-block;
						min-width: 0;
						position: relative;
						transition: all .3s;
						width: 100%;
						font-size: 0.30rem;
						font-weight: 500;
						text-overflow: ellipsis;
					}

					.selectValue {
						font-size: 0.3rem;
						font-weight: 500;
					}

					.middle-inp {
						text-indent: 1.5em;
					}
				}

				.focus {
					border: 0.038rem solid #f22424;
					outline-color: #f22424;
				}

				.hover {
					border: 0.038rem solid #0d84ff;
					outline-color: #0d84ff;
				}
			}
		}
	}

	.MuiDrawer-modal {
		height: 100vh;

		.modal-head {
			height: 1.05rem;

			.head-left {
				width: .6rem;
				height: .6rem;
				margin: 0 .4rem;

				image {
					width: 0.38rem;
					height: 0.26rem;
				}
			}

			.head-right {
				padding-left: .7rem;
				flex: 1;
				color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				font-size: .38rem;
				font-weight: 600;
				line-height: .54rem;
			}
		}

		.modal-view {
			.view-sear {
				.sear-inner {
					width: calc(100% - 0.93rem);
					height: 0.8rem;
					margin: 0.134rem 0.47rem 0;
					background: #fff;
					border-radius: 1.33rem;

					.inner {
						border: 0.04rem solid rgba(255, 255, 255, 1);
						height: 0.84rem;
						padding: 0 0.27rem;
						overflow: hidden;
						background: rgba(240, 240, 240, 1);
						transition: border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
						border-radius: 0.35rem;

						input {
							color: #000;
							font-size: 0.27rem;
							font-weight: 450;
							width: 100%;
							border: 0;
							height: 0.45rem;
							margin: 0;
							display: block;
							padding: .12rem 0 .12rem;
						}
					}
				}
			}
		}

		.index-list {
			height: calc(100% - 0.8rem);
			position: relative;
			overflow-y: auto;
		}

		/deep/.u-index-anchor {
			color: #8c93b0;
			padding: 0.157rem 0.466rem 0.16rem 0.53rem;
			font-size: 0.24rem;
			margin-top: 0.32rem;
			line-height: 0.32rem;
			background-color: #fff !important;
		}

		/deep/.list-cell {
			width: 100%;
			display: flex;
			padding: 0.32rem 1.13rem 0.32rem 0.53rem;
			box-sizing: border-box;
			align-items: center;
			user-select: none;
			justify-content: space-between;
			color: #000000;
			font-size: 0.33rem;
			font-weight: 500;
			line-height: .43rem;

			.text {
				color: rgba(0, 0, 0, 0.4);
				font-size: 0.28rem;
				line-height: 0.35rem;
			}
		}

		/deep/.u-index-list__letter {
			padding: 0.2rem 0;
			background: #f7f7f7;
			box-sizing: border-box;
			border-radius: 0.19rem;
			right: .2rem;
			top: 2.78rem !important;
		}

		/deep/.u-index-list__letter__item {
			color: rgba(0, 0, 0, 0.4);
			height: 0.4rem;
			display: flex;
			font-size: 0.16rem;
			align-items: center;
			font-weight: 500;
			line-height: 0.33rem;
			justify-content: center;
		}
	}
</style>